<template>
  <section class="knife-content bg-gray-full">
    <my-header></my-header>
    <div>
      <van-cell-swipe :right-width="65" class="van-cell-class">
        <div class="shopcart-item">
          <van-checkbox v-model="checked"></van-checkbox>
          <div class="shopcart-content">
            <div class="bg-stamp shopcart-img">
              <img src="../../common/image/pro.jpg" />
            </div>
            <div class="shopcart-product ellipsis">
              <span>【品牌】商品名称</span>
              <p>规格型号</p>
            </div>
            <div class="shopcat-price">
              <span class="total-price">￥12.00</span>
              <van-stepper v-model="value"
                integer
                :min="1"
                :max="9999"/>
            </div>
          </div>
        </div>
        <span slot="right">删除</span>
      </van-cell-swipe>
    </div>
    <my-footer></my-footer>
  </section>
</template>

<script>
import { myFooter, myHeader } from '@/components/index'
import { CellSwipe, Checkbox, Stepper } from 'vant'
export default {
  components: {
    myFooter,
    myHeader,
    [CellSwipe.name]: CellSwipe,
    [Checkbox.name]: Checkbox,
    [Stepper.name]: Stepper
  },
  data () {
    return {
      checked: true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .van-cell-class
    background: #fff;
    box-sizing: border-box;
  .shopcart-item
    box-sizing: border-box;
    width 100%
    border-radius 5Px
    padding 20px
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .shopcart-content
      position relative
      overflow hidden
      margin-left: 5px;
      flex: 1;
      .shopcart-img
        position absolute
        top 0
        left 0
        width 50Px
        height 50Px
      img
        width: 100%
        height 100%
      .shopcart-product
        font-size 28px
        margin-left 60Px
        text-align left
        height: 50Px;
        line-height: 1.5;
      .shopcat-price
        position absolute
        width: 98Px;
        top 0
        right 0
        text-align right
    .total-price
      margin-bottom 10px
      display inline-block


</style>
<style lang="stylus">
  .van-cell-swipe__right
    background #ff0000
    color #fff
    width 65Px
    text-align center
  .van-stepper__minus, .van-stepper__plus
    width 30Px
    height: 24Px;
  .van-stepper__input
    height: 20Px;
</style>

